<template>
	<div class="slider-box" style="margin-top: 150px">
		<vue-slider v-model="value1" v-bind="demo1" :adsorb="true" :marks="marks" 
		:process='process2'
		></vue-slider>
		<br />
		<br />
		{{ value1 }}

		<br />
		<br />
		<br />
		<br />
		<br />

		<section data-title="Formatter" id="demo3">
			<div>
				<vue-slider ref="slider3" v-bind="demo.demo8" :marks="true" :adsorb="true" v-model="demo.demo8.value">
					<template slot="label" slot-scope="{ label, active }">
						<span :class="['custom-label', { active }]" v-if="label % 10 === 0">{{ label }}</span>
					</template>
				</vue-slider>
				<h3>
					<small>Value:</small>
					{{ demo.demo8.value }}
				</h3>
				<div class="btn-group">
					<button @click="setValue('demo8', [100, 200])">set value = [100, 200]</button>
					<button @click="setIndex('slider3', 250)">set index = 250</button>
					<button @click="getValue('slider3')">getValue()</button>
					<button @click="getIndex('slider3')">getIndex()</button>
				</div>
			</div>
			<div></div>
		</section>
		
		 <el-slider v-model="value2" range :max="24" :marks="marks2" show-stops :step="1">
    </el-slider>
		
		
		
		
		
		
		
		
		
	</div>
</template>
<script>
import vueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/antd.css';
export default {
	components: {
		vueSlider
	},
	data() {
		return {
			
			
			
			
			
			 value2: [2, 5],
      marks2: {
        0: '0°C',
        8: '8°C',
        37: '37°C',
        50: {
          style: {
            color: '#1989FA'
          },
          label: this.$createElement('strong', '50%')
        }

      },
			
          'marks': {
          '12': {
            label: '12',
            style: {             
              backgroundColor: 'red',               
            },
            labelStyle: {
              color: 'red'
            }
          },
        
          '20': {
            label: '20',
            style: {
             
              backgroundColor: 'red', 
            },
            labelStyle: {
              color: 'red'
            }
          },
        },
       
			
			
			
			
			
			
			
			
			
			value1: [0, 5  ],
			 process2: dotsPos => [
          [dotsPos[0], dotsPos[1], { backgroundColor: 'blue' }],
          [dotsPos[2], dotsPos[3], { backgroundColor: 'blue' }]
        ],

			min: 0,
			// max: 23,
			demo1: {
				// disabled:true,
				interval: 1,
				width: '100%',
				show: true,
				value: [0, 10],
				min: 0,
				max: 23,
				piecewiseLabel: true
				// tooltip: 'always',
				// tooltipDir: [
				//   "bottom",
				//   "top"
				// ]
			},

			demo: {
				demo8: {
					width: '100%',
					show: true,
					value: [0, 10],
					min: 0,
					max: 23,
					piecewiseLabel: true,
					tooltip: 'always',
					tooltipDir: ['bottom', 'top']
				}
			},
			diy_tooltip: '',
			diy_label: ''
		};
	},
	methods: {
		format(value) {
			return value === null ? 'null' : typeof value === 'string' ? `"${value}"` : value;
		},
		// 有时候在tab 下面引用 会有个坑，滚动条不能动，这时候就需要在created 里面跑下面这个方法
		refreshSlider(val) {
			this.$nextTick(() => {
				this.$refs.slider3.refresh();
			});
		},
		// 下面 的方法都不是必须的
		setDisabled(name) {
			let obj = this.demo[name];
			obj.disabled = !obj.disabled;
		},
		setTooltip(name) {
			let obj = this.demo[name];
			obj.tooltip = obj.tooltip === 'hover' ? 'always' : 'hover';
		},
		setValue(name, num) {
			let obj = this.demo[name];
			obj.value = num;
		},
		setIndex(name, num) {
			let slider = this.$refs[name];
			slider.setIndex(num);
		},
		getValue(name) {
			let slider = this.$refs[name];
			alert(slider.getValue());
		},
		getIndex(name) {
			let slider = this.$refs[name];
			alert(slider.getIndex());
		},
		dragStart() {
			this.demo.demo5.speed = 0;
		},
		dragEnd() {
			this.demo.demo5.speed = 0.5;
		},
		cb(val) {
			console.log(val);
		}
	}
};
</script>

<style>
.slider-box {
	width: 400px;
	margin: 150px auto;
}
.custom-label {
	position: absolute;
	bottom: 100%;
	left: 0;
	transform: translate(-50%, -12px);
	margin-left: 3px;
}
.custom-label::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 5px);
	width: 1px;
	height: 5px;
	background-color: #000;
}

.custom-label.active {
	color: #2980b9;
	font-weight: bold;
}
.custom-label.active::after {
	background-color: #2980b9;
	width: 2px;
}
</style>
